<template>
  <div class="datepicker">
    <el-row :gutter="10">
      <el-col :span="12">
        <el-date-picker
          v-model="value1"
          type="date"
          placeholder="date" 
          :picker-options="getPicker"
          format="yyyy 年 MM 月 dd 日"><!-- format：格式化时间 -->
        </el-date-picker>
      </el-col>

      <!-- 指定一个范围日期 -->
      <el-col :span="12">
        <el-date-picker 
        v-model="value2" 
        type="monthrange" 
        placeholder="date"
        start-placeholder="开始月份"
        end-placeholder="结束月份"
        range-separator="至">
        </el-date-picker>
      </el-col>
      

    </el-row>
    <div>

    </div>
  </div>
</template>

<script>
export default {
  name: "DatePicker",
  data() {
    return {
      value1: '',
      value2: '',
      getPicker: {
        shortcuts: [
          {
            text: '今天',
            onClick(obj) {
              obj.$emit('pick',new Date())
            }
          },
          {
            text: '昨天',
            onClick(obj) {
              const date = new Date()
              date.setTime(date.getTime() - 3600*1000*24)
              obj.$emit('pick',date)
            }
            
          },
          {
              text: '一周前',
              onClick(obj) {
              const date = new Date()
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              obj.$emit('pick',date)  
              }
          }
        ]
      }
    }
  },
}
</script>

<style scope>
</style>